/* Base node styling */
.node {
  cursor: pointer;
  fill-opacity: 1;
  transition: all 200ms ease;
}

/* Node rectangle styling */
.node rect {
  fill: var(--bg-primary);
  stroke: var(--border-color);
  stroke-width: 1px;
  transition: all 200ms ease;
}

.node:hover rect {
  stroke: var(--color-primary);
  stroke-width: 2px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Node text styling */
.node text {
  font-size: 14px;
  font-weight: 500;
  fill: var(--text-primary);
}

/* Parent node specific styling */
.node--internal rect {
  fill: var(--bg-primary);
  stroke: var(--border-color);
}

.node--internal:hover rect {
  stroke: var(--color-primary);
  stroke-width: 2px;
}

.node--internal text {
  font-size: 14px;
  font-weight: 500;
  fill: var(--text-primary);
}

/* Current/active node styling */
.node.active rect {
  stroke: var(--color-primary);
  stroke-width: 2px;
}

/* Link styling */
.link {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 2px;
  transition: stroke 200ms ease;
}

.link:hover {
  stroke: var(--border-color-dark);
}

/* Current path highlight */
.link.current-link {
  stroke: var(--color-primary);
  stroke-opacity: 0.6;
}

/* Tooltip styling */
div.tooltip {
  position: absolute;
  padding: 12px;
  color: var(--text-primary);
  z-index: 100;
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  max-width: 250px;
}

/* Container styling */
.display {
  background-color: var(--bg-secondary);
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* State changes text container styling */
.node foreignObject div {
  max-height: 100%; /* Fixed height for scroll container */
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding-right: 6px;
  scrollbar-color: var(--border-color-dark) var(--bg-secondary);
}

/* Custom scrollbar styling for Webkit browsers */
.node foreignObject div::-webkit-scrollbar {
  width: 6px;
}

.node foreignObject div::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}

.node foreignObject div::-webkit-scrollbar-thumb {
  background: var(--border-color-dark);
  border-radius: 3px;
}

.node foreignObject div::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}
